<template>
  <div>
    <div class="MyOrders">
      <SearchBar @refresh="refresh" :isDel="false" :isSearch="false"/>
      <TableTreeList 
        :tableCols="tableCols"
        :tableData="tableData"
        :isOperates="false"
        :enableEdit="true"
        ref="list"
        @handleSelect="handleSelect"/>
      <pagination :pageData="pageList" @change="pageChange" />
    </div>
  </div>
</template>
<script>
import TableTreeList from "@/components/index/tableTreeList";
import pagination from "@/components/index/pagination";
import SearchBar from "@/components/index/SearchBar";
import { findByUserOrders,toPay,cancelOrder } from "@/js/api/home"; 
export default {
  name:'MyOrders',
  components:{
    TableTreeList,
    SearchBar,
    pagination,
  },
  data(){
    return {
      tableCols: [
        { label: "订单号", prop: "order_id",minWidth:'70px', edit:false},
        { label: "商品信息", prop: "lists",minWidth:'100px', edit:false,
          render(h,params) {
            let arr = params.row.lists
            return h('div',{},arr.map((item)=>{
                return h("div",{
                  attrs:{
                    class:'bomBorder'
                  },
                  domProps:{
                    innerHTML:`
                      <p>商品id：<span>${item.goods_id}</span></p>
                      <p>商品名称：<span>${item.goods_name}</span></p>
                      <p>商品数量：<span>${item.goods_nums}</span></p>
                      <p>商品原价格：<span>${item.goods_price}</span></p>
                      <p>总价格：<span>${parseInt(item.goods_price)*parseInt(item.goods_nums)}</span></p>
                    `
                  },
                }
              );
            }))
            
          }, 
        },
        { label: "总金额", prop: "payment",minWidth:'70px', edit:false},
        { label: "支付方式", prop: "payment_type",minWidth:'70px', edit:false,
          render(h,params) {
            return h("span",{
              domProps:{
                innerHTML:params.row.payment_type == '1' ? '支付宝' : '微信'
              },
            })
          }, 
        },
        { label: "是否支付", prop: "state",minWidth:'70px', edit:false,
          render(h,params) {
            return h("span",{
              domProps:{
                innerHTML:params.row.state == '1' ? '未支付' : '已付款'
              },
            })
          }
        },
        { label: "支付时间", prop: "payment_time",minWidth:'70px', edit:false },
        { label: "操作", prop: "state",minWidth:'70px', edit:false,
          render(h,params) {
            let eleArr = []
            let element = [{state:1,content:'去支付'},{state:2,content:'取消订单'}]
            if(params.row.state == 1){
              for(let i of element){
                eleArr.push(
                  h("el-tag",{
                    props:{
                      type:i.state == 1 ? '' : 'danger'
                    },
                    style:{
                      'cursor': 'pointer',
                      'margin-left':'5px'
                    },
                    domProps:{
                      innerHTML:i.content
                    },
                    on:{
                      click:()=>{
                        if(i.state==1){
                          let val = params.row
                          let obj = {
                            names:"",
                            money:0,
                            order_id:val.order_id
                          }
                          for(let i in val.lists){
                            if(i == val.lists.length-1){
                              obj.names += val.lists[i].goods_name
                            }else{
                              obj.names += val.lists[i].goods_name + "，"
                            }
                            obj.money += parseInt(val.lists[i].goods_price)
                          }
                          toPay(obj).then(response=>{
                            if(response.data.state){
                              const div = document.createElement('divform');
                              div.innerHTML=response.data.data; // data就是接口返回的form 表单字符串
                              document.body.appendChild(div);
                              document.forms[0].setAttribute('target', '_blank') // 新开窗口跳转
                              document.forms[0].submit();
                            }
                          })
                        }else{
                          let obj = {
                            userId:window.localStorage.userId,
                            order_id:params.row.order_id
                          }
                          cancelOrder(obj).then(()=>{})
                        }
                      }
                    },
                  })
                )
              }
            }else{
              eleArr = [
                h("el-tag",{
                  prop:{type:'success'},
                  style:{'cursor': 'pointer'},
                  domProps:{innerHTML:'已支付'},
                }),
              ]
            }
            return h("div",eleArr)
          }
        },
      ],
      tableData:[],
      selectRow:[],
      pageList:{pageSize:4,pageNo:1,total:10},
    }
  },
  created(){
    this.loadList()
  },
  methods:{
    loadList(){
      if(window.localStorage.userId){
        let obj = {
          userId:window.localStorage.userId,
          pageNo:this.pageList.pageNo,
          pageSize:this.pageList.pageSize
        }
        findByUserOrders(obj).then(response=>{
          if(response.data.state){
            this.tableData = response.data.data.list ? response.data.data.list : []
            this.pageList.pageNo = response.data.data.pageNo
            this.pageList.pageSize = response.data.data.pageSize
            this.pageList.total = response.data.data.totalRecords
          }
        })
      }else{
        this.tableData = []
      }
    },
    handleSelect(selection, row){
      this.selectRow = row
    },
    pageChange(obj){
      if(obj){
        this.pageList = obj
      }
      this.loadList()
    },
    refresh(){
      this.loadList()
    },
  }
}
</script>

<style lang="less">
.MyOrders{
  .bomBorder{
    font-size: 1px;
    border: 1px solid #ccc;
  }
}
</style>